<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div{
            width: 300px;
            height: 300px;
            padding: 20px;
            border: 20px solid #333;
            margin:20px;
            background-color: orange;
            /* background-clip: content-box;

            box-sizing: border-box; */

            /* display: none; */
            visibility: hidden; 
            float: left;
        }
    </style>
</head>
<body>
    <div>
        啊司法所发生的发
    </div>
   <script>
    /* 
        元素尺寸:
            简单说就是 改元素在页面(文档流)的占地面积

        offset一套  
        语法:
            元素.offsetWidth 
            元素.offsetHeight 
        得到:
            元素内容 + 内边距 　＋　边框
        
        注意:
            background-clip: content-box; 
            box-sizing: border-box; 
            写上  边框和内边距占据元素的宽度和高度  
            不写  不占据  
            写不写 下面的结果不一样
            元素.offsetWidth 
            元素.offsetHeight  

            如果 有display:none  不占据位置  offsetWidth offsetHeight 0 
            visibility: hidden  虽然隐藏 但是占据位置; 

        client一套

        语法:
            元素.clientWidth 
            元素.clientHeight 
        得到:
            元素内容 + 内边距
         注意:
            background-clip: content-box; 
            box-sizing: border-box; 
            写上  边框和内边距占据元素的宽度和高度  
            不写  不占据  
            写不写 下面的结果不一样
            元素.clientWidth 
            元素.clientHeight  

            如果 有display:none  不占据位置  clientWidth clientHeight 0 
            visibility: hidden  虽然隐藏 但是占据位置; 

    
    
            html元素的clientWidth
            html元素的clientHeight

            dom级别的可视化窗口尺寸   区别于 bom 
            window.innerWidth
            window.innerHeight

    
    */
   </script> 

   <!-- offet 这一套 -->

   <script>
        var boxEle = document.querySelector('div');
        console.dir(boxEle)
        console.log(boxEle.offsetWidth); // 300px
        console.log(boxEle.offsetHeight); // 300px



        console.log(boxEle.clientWidth); // 相比较上面 少了边框
        console.log(boxEle.clientHeight); // 相比较上面 少了边框


   </script>
</body>
</html>